.upload-wrapper {
  color: #000;
  font-size: 12px;
  .upload-select {
    .upload-input {
      display: none;
    }
    .upload-file {
      height: 100px;
      padding: 0 $padding-base;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      border: 1px solid #dcdee2;
      background: #fff;
      span {
        margin-top: 8px;
        font-size: $font-size;
        color: #6c6868;
      }
    }
    .upload-file:hover {
      background: #f8f8f8;
    }
    .upload-img {
      width: 160px;
      height: 100px;
      position: relative;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
        border-radius: 6px;
      }
      .upload-options {
        width: 100%;
        height: 100%;
        top: 0;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.2);
        i {
          font-size: 20px;
          color: #fff;
          margin: 0 4px;
        }
      }
    }
  }
  .preview-modal {
    width: 30%;
    padding: $margin-base * 2;
    box-sizing: content-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    &_title {
      display: flex;
      justify-content: space-between;
      margin-bottom: $margin-base;
      p {
        font-weight: 600;
      }
    }
    &_content {
      display: flex;
      justify-content: center;
      img {
        width: 100%;
        height: 400px;
      }
    }
  }
}
